<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body,
        #box {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script type="importmap">
        {
            "imports": {
                "three": "./../../three/build/three.module.js",
                "three/addons/": "./../../three/examples/jsm/"
            }
        }
    </script>


    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

        const box = document.getElementById('box')
        const scene = new THREE.Scene()
        // 相机
        const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
        camera.position.set(5, 5, 5)
        // 渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
        // 环境光
        scene.add(new THREE.AmbientLight(0xffffff, 4))
        // 参考线
        scene.add(new THREE.AxesHelper(1000))

        /*
            包围盒两种写法
        */
        //写法一
        // const box3 = new THREE.Box3(
        //     new THREE.Vector3(-1, -1, -1),
        //     new THREE.Vector3(1, 1, 1)
        // );
        // 写法2
        const box3 = new THREE.Box3()
        box3.min = new THREE.Vector3(-2, -2, -3);
        box3.max = new THREE.Vector3(5, 2, 5);
        console.log('查看包围盒', box3);

        const size = new THREE.Vector3()
        box3.getSize(size)
        console.log('模型包围盒尺寸', size);

        const center = new THREE.Vector3()
        box3.getCenter(center)
        console.log('模型中心坐标', center);

        const boxGeometry = new THREE.BoxGeometry(size.x, size.y, size.z);
        const material = new THREE.MeshBasicMaterial({
            color: 0xff0000, // 红色
            transparent: true, // 启用透明度
            opacity: 0.3 // 设置透明度
        });

        const box1 = new THREE.Mesh(boxGeometry, material);
        box1.position.copy(center);  //拷贝位置
        scene.add(box1);

        renderer.setSize(box.clientWidth, box.clientHeight)
        box.appendChild(renderer.domElement)
        new OrbitControls(camera, renderer.domElement)

        animate()
        function animate() {
            requestAnimationFrame(animate)
            renderer.render(scene, camera)
        }

    </script>

</body>

</html>